<template>
    <div>
        <div class="operarea">
            <div class="seach">
                <el-input v-model="seachForm.name" :placeholder="$t('name')" clearable size="mini" @keyup.enter.native="seachData"></el-input>
                <el-select v-model="seachForm.type" :placeholder="$t('category')" clearable size="mini">
                    <el-option label="工厂" :value="0"></el-option>
                    <el-option label="国内" :value="1"></el-option>
                    <el-option label="在途" :value="2"></el-option>
                    <el-option label="门店" :value="3"></el-option>
                </el-select>
                <el-button size="mini" icon="el-icon-search" @click="seachData"></el-button>
            </div>
            <div class="btnList">
                <el-button size="mini" @click="addDialogVisible = true">{{$t('add')}}</el-button>
            </div>
        </div>
        <el-card class="cardBox">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>库位管理</el-breadcrumb-item>
            </el-breadcrumb>
            <el-table style="width: 100%" ref="finshTable" :data="locationTab" stripe v-adaptive="{bottomOffset: 85}" height="100">
                <el-table-column prop="name" :label="$t('name')">
                </el-table-column>
                <el-table-column prop="address" label="所在地">
                </el-table-column>
                <el-table-column prop="contacts" label="联系人">
                </el-table-column>
                <el-table-column prop="phone" label="联系电话">
                </el-table-column>
                <el-table-column prop="type" :label="$t('type')">
                </el-table-column>
                <el-table-column prop="address" width="90" label="操作" fixed="right">
                    <template v-slot="scope">
                        <el-button type="primary" size="mini" @click="showModify(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                small
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :pager-count="11"
                :current-page.sync="seachForm.pageNo"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="seachForm.pageSize"
                layout="sizes, prev, pager, next"
                :total="total">
            </el-pagination>
        </el-card>
        <!-- 添加 -->
        <el-dialog :title="$t('add')" :visible.sync="addDialogVisible" width="600px" class="addRobeDlog" :close-on-click-modal="false" @close="addDlogClose(addLocationForm)">
            <el-form :ref="addLocationForm" :model="addLocationForm" :rules="addLocationRules" label-position="left" label-width="80px">
                <el-form-item label="库位名称" prop="name">
                    <el-input v-model="addLocationForm.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="addLocationForm.address" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="联系人" prop="contacts">
                    <el-input v-model="addLocationForm.contacts" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="addLocationForm.phone" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="库位类型" prop="type">
                    <el-select v-model="addLocationForm.type" :placeholder="$t('category')" clearable>
                        <el-option label="工厂" :value="0"></el-option>
                        <el-option label="国内" :value="1"></el-option>
                        <el-option label="在途" :value="2"></el-option>
                        <el-option label="门店" :value="3"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">返回</el-button>
                <el-button type="primary" @click="addData(addLocationForm)">保存</el-button>
            </span>
        </el-dialog>
        <!-- 修改 -->
        <el-dialog :title="$t('add')" :visible.sync="editDialogVisible" width="600px" class="addRobeDlog" :close-on-click-modal="false" @close="editDlogClose(editLocationForm)">
            <el-form :ref="editLocationForm" :model="editLocationForm" :rules="editLocationRules" label-position="left" label-width="80px">
                <el-form-item label="库位名称" prop="name">
                    <el-input v-model="editLocationForm.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="editLocationForm.address" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="联系人" prop="contacts">
                    <el-input v-model="editLocationForm.contacts" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="editLocationForm.phone" placeholder="请输入" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">返回</el-button>
                <el-button type="primary" @click="editData(editLocationForm)">保存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getStkLocationMsg,
    addStkLocation,
    updateStkLocaiton
} from '@/libs/reqlist.js'
export default {
    data() {
        return {
            seachForm: {
                pageNo: 1,
                pageSize: 10,
                type: '',
                name: '',	
                id: ''
            },
            total: 0,
            locationTab: [],
            addDialogVisible: false,
            addLocationForm: {
                name: '',
                address: '',
                contacts: '',	
                phone: '',
                type: ''
            },
            addLocationRules: {
                name: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur' }
                ],
                address: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur' }
                ],
                contacts: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur' }
                ],
                type: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'change' }
                ]
            },
            editDialogVisible: false,
            editLocationForm: {
                name: '',
                address: '',
                phone: '',
                contacts: '',
                deleteStatus: 0,	
                id: ''
            },
            editLocationRules: {
                name: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur' }
                ],
                address: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur' }
                ],
                contacts: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur' }
                ],
                type: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'change' }
                ]
            }
        }
    },
    methods: {
        seachData() {
            getStkLocationMsg(JSON.stringify(this.seachForm)).then(res => {
                if (res.data.code == 0) {
                    this.total = res.data.data.hits
                    res.data.data.data.forEach(item => {
                        switch (item.type) {
                            case 0:
                                item.type = '工厂'
                                break
                            case 1:
                                item.type = '国内'
                                break
                            case 2:
                                item.type = '在途'
                                break
                            case 3:
                                item.type = '门店'
                                break
                        }
                    })
                    this.locationTab = res.data.data.data
                }
            })
        },
        handleSizeChange (newSize) {
            this.seachForm.pageSize = newSize
            this.seachData()
        },
        handleCurrentChange (newNum) {
            this.seachForm.pageNo = newNum
            this.seachData()
        },
        addData(form) {
            this.$refs[form].validate((valid) => {
                if (!valid) return
                addStkLocation(JSON.stringify(this.addLocationForm)).then(res => {
                    if (res.data.code == 0) {
                        this.$message.success('添加成功')
                        this.seachData()
                        this.addDialogVisible = false
                    }
                })
            })
        },
        addDlogClose(form) {
            this.$refs[form].resetFields()
        },
        showModify(item) {
            this.editLocationForm.name = item.name
            this.editLocationForm.address = item.address
            this.editLocationForm.phone = item.phone
            this.editLocationForm.contacts = item.contacts
            this.editLocationForm.deleteStatus = item.deleteStatus	
            this.editLocationForm.id = item.id
            this.editDialogVisible = true
        },
        editData(form) {
            this.$refs[form].validate((valid) => {
                if (!valid) return
                updateStkLocaiton(JSON.stringify(this.editLocationForm)).then(res => {
                    if (res.data.code == 0) {
                        this.$message.success('修改成功')
                        this.seachData()
                        this.editDialogVisible = false
                    }
                })
            })
        },
        editDlogClose(form) {
            this.$refs[form].resetFields()
        }
    },
    mounted() {
        this.seachData()
    }
}
</script>

<style lang="less" scoped>
@import './warelocation.less';
</style>
